import { StackNavigator, TabNavigator } from 'react-navigation';
import React, { Component } from 'react';
import { Alert, Platform, StyleSheet, Text, View, Image, Button, ScrollView, TouchableHighlight, PixelRatio, TextInput } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
import NetUtils from './NetUtils';

var url = 'http://119.29.13.173:8000/api';
var opts ={};
class SignUpScreen extends React.Component {
	static navigationOptions = {
		header: null,
	};
	constructor(props) {
        super(props);
        this.state = {
            cre:'',
            username:'',
            password:'',
        };
    }
	render() {
		const {navigate} = this.props.navigation;
		var txt1 = '<';
		return (
			<View style={styles.view}>
			  <View style={{height:50,backgroundColor:'#2196F7',flexDirection:'row'}}>
			    <View style={{flex:1,justifyContent:'center',alignItems:'flex-start'}}>
			      <TouchableHighlight activeOpacity={1} underlayColor="#eee" onPress={() => navigate('Login')}>
				    <View style={{backgroundColor:'#2196F7',borderTopLeftRadius:5,borderBottomLeftRadius:5}}>
				      <Text style={{fontSize:45,textAlign:'center',color:'white'}}> {txt1} </Text>
				    </View>
				  </TouchableHighlight>
				</View>
				<View style={{flex:10,justifyContent:'center',alignItems:'center'}}>
					<Text style={{color:'white',fontSize:20}}>创建用户</Text>
				</View>
				<View style={{flex:1}}/>
			  </View>
			  <View style={[styles.editGroup, {marginTop:50}]}>
                <View style={styles.editView1}>
                  <TextInput
                    style={styles.edit}
                    underlineColorAndroid="transparent"
                    placeholder="邮箱/手机号"
                    onChangeText={(text) => this.setState({
                        cre:text
                    })}
                    value={this.state.cre}
                    placeholderTextColor="#c4c4c4"/>
                </View>
                <View style={{height: 20/PixelRatio.get()}}/>
                <View style={styles.editView2}>
                  <TextInput
                    style={styles.edit}
                    underlineColorAndroid="transparent"
                    placeholder="用户名(不超过16个字符)"
					maxLength={16}
                    onChangeText={(text) => this.setState({
                        username:text
                    })}
                    value={this.state.username}
                    placeholderTextColor="#c4c4c4"/>
                </View>
                <View style={{height: 20/PixelRatio.get()}}/>
                <View style={styles.editView3}>
                  <TextInput
                    style={styles.edit}
                    underlineColorAndroid="transparent"
					password={true}
					secureTextEntry={true}
                    placeholder="密码(不超过16个字符)"
                    onChangeText={(text) => this.setState({
                        password:text
                    })}
                    value={this.state.password}
					maxLength={16}
                    placeholderTextColor="#c4c4c4"/>
                </View>
                <View style={{marginTop: 30, height: 40}}>
                  <TouchableHighlight activeOpacity={1} underlayColor="#eee" onPress={() => this.signUp(this.state.cre)}>
					<View style={styles.login}>
						<Text style={{color:'white'}}> 注册 </Text>
					</View>
				  </TouchableHighlight>
                </View>
              </View>
			</View>
		)
	}
	signUp = (str)=> {
            let valid = false;
			var re = /^1\d{10}$/;
              if (re.test(str)) {
                valid = true;
              }
            else {re = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/
                          if(re.test(str)){
                            valid = true
                          }};
            if (valid === true)
            {
                if (this.state.username === '' || this.state.password === '')
                {
                    alert('用户名或密码不能为空！');
                }
                else
                {const {navigate} = this.props.navigation;
                                var service = 'login';
                                opts = {
                                    username:this.state.username,
                                    password:this.state.password,
                                };
                                
                var service = 'register';
                NetUtils.post(url,service,opts, (data) => {
                           console.log(data);
                            if (data.status === 200){
                              alert('注册成功！');
                         }});
                }
            }
            else 
            {
                alert('错误手机或邮箱格式！');
            }

	}
}
const styles = StyleSheet.create({
	view: {
        flex: 1,
    },
	editGroup:{
        margin: 20,
    },
	editView1:{
        height: 48,
        backgroundColor:'white',
        justifyContent: 'center',
        borderTopLeftRadius: 3,
        borderTopRightRadius: 3,
    },
    editView2:{
        height: 48,
        backgroundColor:'white',
        justifyContent: 'center',
        borderBottomLeftRadius: 3,
        borderBottomRightRadius: 3,
    },
	editView3:{
        height: 48,
        backgroundColor:'white',
        justifyContent: 'center',
        borderBottomLeftRadius: 3,
        borderBottomRightRadius: 3
    },
	textButtonLine:{
        marginTop: 12,
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
	edit:{
        height: 40,
        fontSize: 13,
        backgroundColor: '#fff',
        paddingLeft: 15,
        paddingRight: 15,
    },
	login:{
		backgroundColor:'blue',
		height:35,
		borderRadius:5,
		marginLeft:5,
		marginRight:5,
		justifyContent:'center',
		alignItems: 'center',
	},
});

export default SignUpScreen;